<template>
	<view class="wui-input">
		<template v-if="type === 'textarea'">
			<textarea :auto-height="autoHeight" :value="value" :maxlength="maxlength" :placeholder="placeholder" @input="input" @confirm="confirm" @focus="focus" @blur="blur" />
		</template>
		<template v-else>
			<!-- #ifndef H5 -->
			<input
				:type="type"
				:password="password"
				:disabled="disabled"
				:maxlength="maxlength"
				:focus="myfocus"
				:placeholder="placeholder"
				:value="value"
				@input="input"
				@confirm="confirm"
				@focus="focus"
				@blur="blur"
			/>
			<!-- #endif -->

			<!-- #ifdef H5 -->
			<input
				v-if="type === 'text'"
				type="text"
				:disabled="disabled"
				:maxlength="maxlength"
				:focus="autofocus"
				:placeholder="placeholder"
				:value="value"
				@input="input"
				@confirm="confirm"
				@focus="focus"
				@blur="blur"
			/>
			<input
				v-if="type === 'number'"
				type="number"
				:disabled="disabled"
				:maxlength="maxlength"
				:focus="autofocus"
				:placeholder="placeholder"
				:value="value"
				@input="input"
				@confirm="confirm"
				@focus="focus"
				@blur="blur"
			/>
			<input
				v-if="type === 'idcard'"
				type="idcard"
				:disabled="disabled"
				:maxlength="maxlength"
				:focus="autofocus"
				:placeholder="placeholder"
				:value="value"
				@input="input"
				@confirm="confirm"
				@focus="focus"
				@blur="blur"
			/>
			<input
				v-if="type === 'digit'"
				type="digit"
				:disabled="disabled"
				:maxlength="maxlength"
				:focus="autofocus"
				:placeholder="placeholder"
				:value="value"
				@input="input"
				@confirm="confirm"
				@focus="focus"
				@blur="blur"
			/>
			<!-- #endif -->
			<view v-if="clearable && value.length" class="clear iconfont icon-wui-circular-close" @click="clear"></view>
		</template>
	</view>
</template>

<script>
export default {
	name: 'w-input',
	props: {
		value: {
			type: [String, Number]
		},
		type: {
			type: String,
			default: 'text'
		},
		disabled: {
			type: Boolean,
			default: false
		},
		clearable: {
			type: Boolean,
			default: true
		},
		autofocus: {
			type: Boolean,
			default: false
		},
		placeholder: {
			type: String
		},
		maxlength: {
			type: Number,
			default: 140
		},
		confirmType: {
			type: String,
			default: 'done'
		},
		password: {
			type: Boolean,
			default: false
		},
		autoHeight: {
			type: Boolean,
			default: true
		}
	},

	methods: {
		input(e) {
			this.$emit('input', e.detail.value);
		},
		confirm(e) {
			this.$emit('confirm', e.detail.value);
		},
		focus(e) {
			this.$emit('focus', e.detail.value);
		},
		blur(e) {
			this.$emit('blur', e.detail.value);
		},
		clear() {
			this.$emit('input', '');
		}
	}
};
</script>

<style lang="scss" scoped>
.wui-input {
	display: flex;
	align-items: center;
	position: relative;
	min-height: 60rpx;

	> input {
		font-size: 28rpx;
		flex: 1;
		height: 100%;
		display: flex;
		align-items: center;
	}
	
	> textarea {
		font-size: 28rpx;
		flex-shrink: 0;
		flex: 1;
		height: 100%;
		width: auto;
		min-height: 140rpx;
		background-color: #efeff9;
		padding: 10rpx;
	}

	.clear {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50rpx;
		height: 100%;
	}
}
</style>
